<div class="modal-header">
  <button type="button" class="close" ng-click="close()">
    <span class="pficon pficon-close"></span>
  </button>
  <h4 class="modal-title" ng-hide="selectedTx">Instance Details for {{ rootNode.uri }} ({{filteredData.length}} entries shown)</h4>
  <h4 class="modal-title" ng-show="selectedTx">Instance Details Diagram</h4>
</div>
<div class="modal-body">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline" ng-show="!selectedTx">
        <div class="form-group">
          <label for="txtFilter">Text</label>
          <input type="text" class="form-control" id="txtFilter" placeholder="Filter" ng-model="tableFilter">
        </div>
        <div class="form-group">
          <label for="minDuration">Duration From</label>
          <div class="input-group">
            <input type="number" min="0" class="form-control" placeholder="Minimum Duration" id="minDuration"
              ng-model="minDuration" ng-change="checkMinMaxDuration()">
            <div class="input-group-addon">ms</div>
          </div>
        </div>
        <div class="form-group">
          <label for="maxDuration">To</label>
          <div class="input-group">
            <input type="number" min="{{minDuration || 0}}" class="form-control" placeholder="Maximum Duration" id="maxDuration" ng-model="maxDuration">
            <div class="input-group-addon">ms</div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="row" ng-show="selectedTx">
    <div class="col-md-12">
      <a href="" ng-click="selectedTx = ''">&laquo; Back to full table ({{filteredData.length}} entries)</a>
    </div>
  </div>
  <div class="row">
    &nbsp;
  </div>
  <div class="row">
    <div class="col-md-12">
      <table class="datatable table table-striped table-bordered inst-details-table">
        <thead>
          <tr>
            <th class="inst-details-timestamp" ng-click="sort('timestamp')">Timestamp
              <span class="glyphicon sort-icon" ng-show="sortKey=='timestamp'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <!--<th ng-click="sort('uri')">URL
              <span class="glyphicon sort-icon" ng-show="sortKey=='uri'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>-->
            <th class="inst-details-properties" ng-click="sort('properties')">Properties
              <span class="glyphicon sort-icon" ng-show="sortKey=='properties'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <th class="inst-details-duration" ng-click="sort('duration')">Duration
              <span class="glyphicon sort-icon" ng-show="sortKey=='duration'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <th class="inst-details-details">Details
            </th>
          </tr>
        </thead>
        <tbody>
          <tr dir-paginate-start="tData in filteredData = (timesData | filter:tableFilter | filter:durationRange | orderBy:sortKey:reverse) | itemsPerPage:numPerPage" ng-show="!selectedTx || selectedTx === tData.id">
            <td class="inst-details-timestamp">{{ tData.timestamp | date:'medium' }}</td>
            <!--<td>{{ tData.uri }}</td>-->
            <td class="inst-details-properties">
              <span class="label label-default" ng-repeat="tDataProp in tData.propertiesGrouped" ng-click="tDataProp.expand = !tDataProp.expand" tooltip="{{tDataProp.name}} : {{tDataProp.value}}"  ng-if="!!tDataProp.value">
                {{tDataProp.name}}:<span ng-hide="tDataProp.expand">{{ tDataProp.value | limitTo:16}}<span ng-show="!tDataProp.expand && tDataProp.value.length > 16">...</span></span><span ng-show="tDataProp.expand">{{ tDataProp.value }}</span>
              </span>
            </td>
            <td class="inst-details-duration">{{ tData.duration | hkDuration }}</td>
            <td class="inst-details-details" ng-click="showIVD(tData.id)"><i class="fa fa-sitemap"></i></td>
          </tr>
          <tr dir-paginate-end ng-if="selectedTx === tData.id">
            <td colspan="4" class="details-row" instance-view-diagram nodes="instDetails">
              <svg id="idetails" class="graph"><g/></svg>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <dir-pagination-controls class="pull-right" max-size="numPerPage" direction-links="true" boundary-links="true" ng-show="!selectedTx" />
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" ng-click="close()">Close</button>
</div>
